<template>
  <div class="container container-1200">
    <div class="imgFrame" >
      <img :src="headImg" alt="要闻图" class="noticeImg" />
    </div>
    <div class="journalismPanel flex justify-between flex-wrap">
      <div class="imgNewsLeft flex flex-direction">
        <div class="titleSec flex justify-between">
          <div class="secLeft">
            <p
              v-for="(item, index) in journalismList"
              :key="index"
              class="navChoice flex justify-between align-start"
              :class="{ activeChice: journalismInd == item.id }"
              @click="activeSelect(item.id)"
            >
              <img
                :src="item.activeImg"
                alt=""
                class="acImg"
                :class="{ seizeAseat: item.id != journalismInd }"
              />
              <span>{{ item.name }}</span>
            </p>
          </div>
          <div class="secRight">更多></div>
        </div>
        <div class="titContant flex-sub">
          <div
            v-for="(item, index) in journalismContant"
            :key="index"
            class="everyRow flex align-center justify-between"
            @click="detailedNews"
          >
            <span class="spot"></span>
            <p class="jourFrame">
              <img :src="item.image_url" alt="" class="journaImg" />
            </p>
            <p class="titleTxt">{{ item.title }}</p>
            <p class="time">{{ item.timeY }}</p>
          </div>
        </div>
      </div>
      <div class="imgNewsRight flex flex-direction">
        <div class="titleSec flex justify-between">
          <div class="secLeft">
            <p class="navJour flex justify-between align-start">
              <img
                src="../assets/image/index/notice.png"
                alt="话筒"
                class="huaImg"
              />
              <span>通知公告</span>
            </p>
          </div>
          <div class="secRight">更多></div>
        </div>
        <div class="rightFrame flex-sub">
          <div
            v-for="(item, index) in noticeList"
            :key="index"
            class="everyRow flex justify-between"
          >
            <p class="rowLeft flex justify-between align-center">
              <span class="spot"></span>
              <span class="txt">{{ item.title }}</span>
            </p>
            <i class="time">{{ item.timeY }}</i>
          </div>
        </div>
      </div>
    </div>
    <div class="detailsText flex flex-direction">
      <div class="typeRow flex justify-between">
        <p class="typeRow-left flex">
          <span
            v-for="(item, index) in departmentList"
            :key="index"
            class="every-term flex justify-between align-start"
            @click="activeDepartment(item.id)"
            :class="{ activeTerm: item.id == departmentType }"
          >
            <img
              :src="item.img_url"
              alt="图标"
              class="tuImg"
              :class="{ seizeAseat: item.id != departmentType }"
            />
            <i class="tit">{{ item.name }}</i>
          </span>
        </p>
        <p class="typeRow-right">更多&gt;</p>
      </div>
      <div class="endSection flex-sub flex">
        <p
          v-for="(item, index) in departmentData"
          :key="index"
          class="everyEnd flex justify-between align-center"
        >
          <span class="spot"></span>
          <span class="imgFrame">
            <img :src="item.image_url" alt="" class="newImg" />
          </span>
          <span class="wordTxt">
            {{ item.title }}
          </span>
          <span class="time">
            {{ item.timeY }}
          </span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      data: "",
      headImg: "",
      journalismList: [
        {
          id: 1,
          name: "图片要闻",
          activeImg: require("../assets/image/index/focusnewsimg.png"),
        },
        {
          id: 2,
          name: "视频要闻",
          activeImg: require("../assets/image/index/videoimg.png"),
        },
        {
          id: 3,
          name: "媒体聚焦",
          activeImg: require("../assets/image/index/mediafocus.png"),
        },
      ], //要闻选择
      journalismInd: 1, //图片要问选择
      journalismContant: [], //要闻数组
      noticeList: [], //通知公告
      departmentList: [
        {
          id: 1,
          name: "教育部",
          img_url: require("../assets/image/index/qasy.png"),
        },
        {
          id: 2,
          name: "教育厅",
          img_url: require("../assets/image/index/department.png"),
        },
        {
          id: 3,
          name: "市县",
          img_url: require("../assets/image/index/district.png"),
        },
        {
          id: 4,
          name: "学校",
          img_url: require("../assets/image/index/school.png"),
        },
      ], //部门类型
      departmentType: 1, //部门选择
      departmentData: [], //部门数据
    };
  },
  mounted() {
    this.getHeadImg();
    this.getTypePage();
    this.detailedNews();
    this.getDepartmentType();
  },
  methods: {
    //选择要闻
    activeSelect(val) {
      this.journalismInd = val;
      this.getTypePage(val);
    },
    //获取要闻
    async getTypePage(val = 1) {
      const res = await this.$http.get("/api/tab/list/news", {
        type: val,
      });
      console.log(res);
      if (res.code == 200) {
        this.journalismContant = res.data;
      }
    },
    //获取顶部图片
    async getHeadImg() {
      const res = await this.$http.get("/api/education/image");
      if (res.code == 200) {
        this.headImg = res.data.image_url;
      }
    },
    //通知公告
    async detailedNews() {
      const res = await this.$http.get("/api/tab/list/notice");
      if (res.code == 200) {
        this.noticeList = res.data;
      }
    },
    //选择部门
    activeDepartment(val) {
      this.departmentType = val;
      this.getDepartmentType(val);
    },
    //部门数据
    async getDepartmentType(val = 1) {
      const res = await this.$http.get("/api/tab/list/education", {
        type: val,
      });
      if (res.code == 200) {
        this.departmentData = res.data;
      }
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.container {
  .imgFrame {
    padding-top: 10px;
    width: 1200px;
    height: 364px;
    margin-bottom: 50px;
    .noticeImg {
      width: 1200px;
      height: 364px;
    }
  }
  .journalismPanel {
    height: 424px;
    width: 100%;
    //display: grid;
    grid-template-columns: repeat(2, 1fr);
    .imgNewsLeft {
      width: 590px;
      height: 424px;
      .titleSec {
        height: 30px;
        width: 100%;
        border-bottom: 1px solid #bfbfbf;
        padding-left: 10px;
        .secLeft {
          width: 440px;
          height: 30px;
          display: flex;
          .navJour {
            margin-right: 56px;
            font-size: 18px;
            color: #333333;
          }
          .navChoice {
            font-size: 18px;
            color: #333333;
            padding: 0px 20px;
            cursor: pointer;
            .acImg {
              width: 18px;
              height: 18px;
              margin-right: 6px;
            }
          }
          .activeChice {
            border-bottom: 1px solid #2c64ff;
            color: #2c64ff;
            font-weight: bold;
          }
          .seizeAseat {
            visibility: hidden;
          }
        }
        .secRight {
          font-size: 14px;
          color: #908e8e;
          padding-left: 0px;
          cursor: pointer;
        }
      }
      .titContant {
        padding-top: 24px;
        // padding-bottom: 20px;
        .everyRow {
          height: 104px;
          margin-bottom: 20px;
          cursor: pointer;
          .spot {
            display: inline-block;
            width: 6px;
            height: 6px;
            background-color: #0d0d0d;
            border-radius: 50%;
          }
          .jourFrame {
            height: 102px;
            width: 172px;
            border-radius: 6px;
            overflow: hidden;
            .journaImg {
              height: 102px;
              width: 172px;
            }
          }
          .titleTxt {
            width: 276px;
            height: 40px;
            font-size: 16px;
            text-align: left;
            line-height: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            font-weight: 500;
          }
          &:hover {
            color: #2c64ff;
          }
          &:hover .spot {
            background: #2c64ff;
          }
        }
      }
    }
    .imgNewsRight {
      width: 590px;
      justify-self: end;
      height: 424px;
      .titleSec {
        height: 30px;
        width: 100%;
        border-bottom: 1px solid #bfbfbf;
        .secLeft {
          width: 440px;
          height: 30px;
          display: flex;
          .navJour {
            margin-right: 56px;
            font-size: 18px;
            color: #333333;
            border-bottom: 1px solid #2c64ff;
            color: #2c64ff;
            font-weight: bold;
            padding: 0px 8px;
            .huaImg {
              width: 18px;
              height: 18px;
              margin-right: 8px;
            }
          }
        }
        .secRight {
          font-size: 14px;
          color: #908e8e;
          padding-left: 0px;
          cursor: pointer;
        }
      }
      .rightFrame {
        padding-top: 30px;
        .everyRow {
          height: 16px;
          margin-bottom: 22px;
          cursor: pointer;
          .rowLeft {
            height: 16px;
            .spot {
              display: inline-block;
              width: 6px;
              height: 6px;
              background-color: #0d0d0d;
              border-radius: 50%;
              margin-right: 16px;
            }
            .txt {
              font-size: 16px;
              color: #303030;
            }
          }
          .time {
            font-size: 16px;
            color: #999999;
          }
          &:hover .txt {
            color: #2c64ff;
          }
          &:hover .spot {
            background: #2c64ff;
          }
          &:hover .time {
            color: #2c64ff;
          }
        }
      }
    }
  }
  .detailsText {
    height: 434px;
    width: 100%;
    // background: crimson;
    .typeRow {
      height: 30px;
      border-bottom: 1px solid #bfbfbf;
      .typeRow-left {
        .every-term {
          padding: 0px 20px;
          cursor: pointer;
          .tuImg {
            width: 18px;
            height: 18px;
            margin-right: 6px;
          }
          .tit {
            padding-top: 2px;
          }
          .seizeAseat {
            visibility: hidden;
          }
        }
        .activeTerm {
          font-weight: bold;
          color: #2c64ff;
          border-bottom: 1px solid #2c64ff;
        }
      }
      .typeRow-right {
        cursor: pointer;
      }
    }
    .endSection {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      padding-top: 20px;
      grid-column-gap: 20px;
      .everyEnd {
        height: 68px;
        width: 590px;
        cursor: pointer;
        .spot {
          display: inline-block;
          width: 6px;
          height: 6px;
          background-color: #0d0d0d;
          border-radius: 50%;
        }
        .imgFrame {
          width: 116px;
          height: 68px;
          border-radius: 6px;
          overflow: hidden;
          margin: 0;
          .newImg {
            width: 116px;
            height: 68px;
          }
        }
        .wordTxt {
          width: 326px;
          height: 40px;
          text-align: left;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        &:hover .spot {
          background: #2c64ff;
        }
        &:hover .wordTxt {
          color: #2c64ff;
        }
        &:hover .time {
          color: #2c64ff;
        }
      }
    }
  }
}
@media screen and (max-width: 600px) {
  .imgFrame{
    width: 100% !important;
    height: 200px !important;
    padding: 10px;
    margin-bottom: 0 !important;
    .noticeImg{
      height: 100% !important;
      width: 100% !important;
    }
  }
  .imgNewsLeft{
    width: 100% !important;
  }
  .navChoice{
    align-items: center;
    padding: 0 10px !important;
    span{
      font-size: 12px;
      line-height: 30px;
    }
  }
  .secLeft{
    width: unset !important;
  }
  .secRight{
    font-size: 12px !important;
    line-height: 30px;
  }
  .titContant{
    padding-top: 0px !important;
  }
  .imgNewsLeft{
    height: unset !important;
    padding-bottom: 10px;
    .everyRow{
      height: 90px !important;
      padding: 10px;
      margin-bottom: 0 !important;
      .jourFrame{
        width: 116px !important;
        height: 70px !important;
        img{
          width: 100% !important;
          height: 100% !important;
        }
      }
      .titleTxt{
        width: 210px !important;
        font-size: 14px !important;
      }
      .time{
        display: none;
        font-size: 14px;
      }
    }
  }
  .imgNewsRight{
    height: unset !important;
    .rightFrame{
      padding: 0 10px !important;
      .everyRow{
        height: unset  !important;
        margin-bottom: 0px !important;
        line-height: 40px !important;
        .time{
          font-size: 14px !important;
        }
        .rowLeft{
          height: unset !important;
          line-height: 40px;
          font-size: 14px !important;
          .txt{
            font-size: 14px !important;
          }
        }
      }
    }
  }
  .detailsText{
    height: unset !important;
    padding: 20px 0 ;
    .typeRow{
      .typeRow-right{
        font-size: 14px !important;
        line-height: 30px;
      }
      .every-term{
        align-items: center;
        line-height: 30px;
        font-size: 14px;
        padding: 0px 10px !important;
      }
    }
    .endSection{
      display: flex !important;
      .everyEnd{
        width: 100% !important;
        padding: 0 10px;
        .spot{
          margin-right: 6px;
        }
        .imgFrame{
          width: 116px !important;
          height: 70px !important;
          padding: 0px !important;
        }
        .time{
          display: none;
        }
        .wordTxt{
          padding: 0 5px;
          flex: 1;
          width: unset !important;
          line-height: 20px;
        }
      }
    }
  }
  .navJour{
    align-items: center;
    font-size: 14px !important;
  }
}
</style>